<template>
  <div class="change-password-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">修改密码</span>
        </div>
      </template>
      
      <el-form
        :model="passwordForm"
        :rules="passwordRules"
        ref="passwordFormRef"
        label-width="120px"
        @submit.prevent
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            placeholder="请输入原密码"
            show-password
            :maxlength="20"
          />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
            :maxlength="20"
          />
        </el-form-item>
        
        <el-form-item label="确认新密码" prop="confirmNewPassword">
          <el-input
            v-model="passwordForm.confirmNewPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
            :maxlength="20"
          />
        </el-form-item>
        
        <el-form-item class="form-buttons">
          <el-button 
            type="primary" 
            @click="submitPasswordForm" 
            :loading="loading"
          >
            {{ loading ? '提交中...' : '提交' }}
          </el-button>
          <el-button @click="resetPasswordForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/user'
import { editPasswordApi } from '@/api/login'
import { showStatusMessage } from '@/utils/common/showMessage'

const userStore = useUserStore()
const loading = ref(false)

// 定义表单数据
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmNewPassword: ''
})

// 密码验证正则

// 定义表单验证规则
const passwordRules = reactive({
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在8-20个字符之间', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在8-20个字符之间', trigger: 'blur' },
   
  ],
  confirmNewPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'))
        } else if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的新密码不一致'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    }
  ]
})

// 表单引用
const passwordFormRef = ref(null)

// 提交表单函数
const submitPasswordForm = async () => {
  if (loading.value) return
  
  try {
    await passwordFormRef.value.validate()
    loading.value = true
    
    const res = await editPasswordApi({
      ...passwordForm,
      identity: userStore.userInfo.identity,
      account: userStore.userInfo.account
    })
    
    showStatusMessage(res)
    if (res.code === 200) {
      passwordFormRef.value.resetFields()
    }
    resetPasswordForm()
  } catch (error) {
    console.error('修改密码失败:', error)
    resetPasswordForm()

  } finally {
    loading.value = false
    resetPasswordForm()

  }
}

// 重置表单函数
const resetPasswordForm = () => {
  passwordFormRef.value.resetFields()
}
</script>

<style scoped>
.change-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 300px);
  padding: 20px;
}

.box-card {
  width: 100%;
  max-width: 500px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.form-buttons {
  margin-top: 20px;
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .box-card {
    margin: 0 16px;
  }
  
  :deep(.el-form-item__label) {
    width: 100px !important;
  }
}
</style>
